<template>
  <div class="component">
    <el-card :body-style="{ padding: '3rem' }">
      <el-form label-width="80px">
        <div class="from-login-box">
          <h3 style="margin-left: 80px; margin-bottom: 1rem">账号登录</h3>
          <el-form-item label="用户名">
            <el-row :gutter="20" type="flex">
              <el-col :span="16">
                <el-input v-model="form.username" :disabled="true"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="密码">
            <el-row :gutter="20" type="flex">
              <el-col :span="16">
                <el-input
                  v-model="form.password"
                  type="password"
                  :disabled="disablePassword"
                ></el-input>
              </el-col>
              <el-col :span="8">
                <el-button @click="disablePassword = false">修改密码</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </div>

        <div class="from-login-box">
          <div class="title">
            <h3 style="margin-left: 80px; margin-bottom: 1rem">用户信息</h3>
            <el-form-item label="真实姓名">
              <el-row :gutter="20" type="flex">
                <el-col :span="16">
                  <el-input v-model="form.realName"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-row :gutter="20" type="flex">
                <el-col :span="16">
                  <el-input v-model="form.email" type="email"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-row :gutter="20" type="flex">
                <el-col :span="16">
                  <el-input v-model="form.mobile"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
          </div>
        </div>
        <el-form-item style="margin: 2rem; float: left">
          <el-button @click="submit" type="primary">确认变更</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { update } from "@/api/common";
import { Message } from "element-ui";

export default {
  data() {
    return {
      disablePassword: true,

      form: {
        username: "",
        password: "",
        realName: "",
        email: "",
        mobile: "",
      },
    };
  },

  created() {
    this.form = this.$store.getters["user/info"];
    this.form.password = undefined;
  },

  methods: {
    submit() {
      const id = this.$store.getters["user/id"];
      const password = this.form.password;
      const realName = this.form.realName;
      const email = this.form.email;
      const mobile = this.form.mobile;
      update("user", { id, realName, password, email, mobile }).then(() => {
        
        Message({
          message: "更改成功",
          type: "success",
          duration: 5 * 1000,
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.component {
  margin: 2rem;

  .from-login-box {
    text-align: left;
    width: 25rem;
    margin-bottom: 5rem;
  }

  .binding {
    text-align: left;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;

      margin-left: 50px;
      margin-bottom: 1rem;
    }
  }
}
</style>